<template>
<q-dialog class="progress-dialog" v-model="show" persistent maximized>
  <q-card v-drag class="full-width full-height flex bg-white screen">
    <q-card-section class="row items-center q-pb-none full-width">
      <div class="text-h6 text-weight-bold">{{title}}</div>
      <q-space />
      <q-btn @click="hideDialog" flat round size="sm" color="primary" icon="iconfont icontubiao-133">
        <q-tooltip>关闭</q-tooltip>
      </q-btn>
    </q-card-section>
    <q-card-section class="dialog-content">
      <ul class="progress-list">
        <li>
          <span class="left">正常进度</span>
          <progress-bar class="progress" :value="info.normal" color="#18d77f" size="big" />
          <span class="right text-right">{{info.normal}}台</span>
        </li>
        <li>
          <span class="left">稍微落后</span>
          <progress-bar class="progress" :value="info.behind" color="#F7B82D" size="big" />
          <span class="right">{{info.behind}}台</span>
        </li>
        <li>
          <span class="left">严重落后</span>
          <progress-bar class="progress" :value="info.behindSeverity" color="#E43434" size="big" />
          <span class="right text-right">{{info.behindSeverity}}台</span>
        </li>
        <li>
          <span class="left">暂未派工</span>
          <progress-bar class="progress" :value="info.noWork" color="#999999" size="big" />
          <span class="right text-right">{{info.noWork}}台</span>
        </li>
      </ul>
    </q-card-section>
  </q-card>
</q-dialog>
</template>

<script>
import Progress from './progress'
export default {
  props: {
    title: {
      type: String,
      default: '当班机床作业状态分布'
    }
  },
  data () {
    return {
      show: false,
      info: {
        normal: 0,
        behind: 0,
        behindSeverity: 0,
        noWork: 0
      }
    }
  },
  methods: {
    // 显示弹框
    showDialog (info) {
      this.initInfo(info)
      this.show = true
    },
    // 隐藏弹框
    hideDialog () {
      this.show = false
    },
    // 初始化数据
    initInfo (info) {
      this.info = info
    },
    // 提交
    submit () {
      const data = {
      }
      this.submitting = true
      this.$emit('submit', this.state, data)
    }
  },
  components: {
    'progress-bar': Progress
  }
}
</script>

<style scoped lang="stylus">
.dialog-content{
  width 100%
  height calc(100vh - 50px)
  display flex
  justify-content center
  align-items center
  .progress-list{
    width 100vh
    height calc(100% - 36px)
    display flex
    flex-direction column
    justify-content space-around
    li{
      display flex
      font-size 24px
      align-items center
      .progress{
        flex 1 auto
        margin 0 20px
      }
    }
  }
}
</style>
